// 移动端事件，使用touch来模拟点击事件
import React from "react"
class Demo extends React.Component {
    touchstart = (ev) => {
        let finger = ev.changedTouches[0] // 记录了手指的相关信息
        this.touch = {
            startX: finger.pageX,
            startY: finger.pageY,
            isMove: false,
        }
    }
    // 手指移动
    touchmove = (ev) => {
        let finger = ev.changedTouches[0],
            { startX, startY } = this.touch
        let changeX = finger.pageX - startX,
            changeY = finger.pageY - startY
        if (Math.abs(changeX) > 10 || Math.abs(changeY) > 10) {
            this.touch.isMove = true
        }
    }

    // 手指离开：根据isMove 判断是否移动了
    touched = (ev) => {
        let { isMove } = this.touch
        if (isMove) return
        // 说明触发点击事件
        console.log("点击了按钮")
    }

    render() {
        return (
            <div>
                <button
                    onTouchStart={this.touchstart}
                    onTouchMove={this.touchmove}
                    onTouchEnd={this.touched}
                >
                    按钮
                </button>
            </div>
        )
    }
}

export default Demo
